<template>
  <div class="plan-info">
    <div class="plan-info-list-item">
      <div class="item-info">
        <text class="item-info-label">方案名称：</text>
        <text>{{ planInfo.name ? planInfo.name : '-' }}</text>
      </div>
      <div class="item-info">
        <text class="item-info-label">方案编号：</text>
        <text>{{ planInfo.code ? planInfo.code : '-' }}</text>
      </div>
    </div>
    <div class="plan-info-list-item">
      <div class="item-info">
        <text class="item-info-label">发布时间：</text>
        <text>{{
          planInfo.publishTime
            ? moment(planInfo.publishTime).format('YYYY-MM-DD')
            : '-'
        }}</text>
      </div>
      <div class="item-info">
        <text class="item-info-label">方案方：</text>
        <text>{{ planInfo.publisher ? planInfo.publisher : '-' }}</text>
      </div>
    </div>
    <div class="plan-info-list-item">
      <div class="item-info">
        <text class="item-info-label">执行方向：</text>
        <text>{{ planInfo.direction ? planInfo.direction : '-' }}</text>
      </div>
      <div class="item-info">
        <text class="item-info-label">起止时间：</text>
        <text>{{ planInfo.period ? planInfo.period : '-' }}</text>
      </div>
    </div>
    <div class="plan-info-list-item">
      <div class="item-info">
        <text class="item-info item-info-label">目标范围：</text>
        <text>{{ planInfo.plotName ? planInfo.plotName : '-' }}</text>
      </div>
      <div class="item-info">
        <text class="item-info-label">面积：</text>
        <text>{{ planInfo.area ? planInfo.area : '-' }}</text>
      </div>
    </div>
    <!-- 表格1 -->
    <div class="table">
      <div class="tr">
        <div class="th th-one th-label">执行标准</div>
        <div class="th th-one">定量</div>
      </div>
      <div class="tr-more">
        <div class="th">料号</div>
        <div class="th">产品名称</div>
        <div class="th">浓度</div>
        <div class="th">亩使用量</div>
        <div class="th td-right-none">单位</div>
      </div>
      <template v-if="planInfo.rations">
        <div class="tr-more" v-for="item in planInfo.rations" :key="item.id">
          <div class="td">{{ item.code ? item.code : '-' }}</div>
          <div class="td">{{ getMaterialName(item.name) }}</div>
          <div class="td">
            {{ item.concentration ? item.concentration : '-' }}
          </div>
          <div class="td">{{ item.usageAmount ? item.usageAmount : '-' }}</div>
          <div class="td td-right-none">{{ item.unit ? item.unit : '-' }}</div>
        </div>
      </template>
      <template v-else><div class="tr-more">暂无数据</div> </template>
      <div class="tr">
        <div class="th th-one th-label">设定参数</div>
        <div class="tr-more">
          <div class="td bold">水量参数</div>
          <div class="td">
            {{ planInfo.waterParameters ? planInfo.waterParameters : '-' }}
          </div>
          <div class="td bold">水池高度</div>
          <div class="td td-right-none">
            {{ planInfo.poolHeight ? planInfo.poolHeight : '-' }}
          </div>
        </div>
      </div>
      <div class="th th-one th-label">定性</div>
      <div class="th th_rich_text">
        {{ planInfo.qualitative ? planInfo.qualitative : '-' }}
      </div>
    </div>
    <!-- 材料领用单 -->
    <div class="table mt-60">
      <div class="tr">
        <div class="th th-one th-label">材料领用单</div>
        <div class="tr-more">
          <div class="td bold">类别</div>
          <div class="td">
            {{ planInfo.category ? planInfo.category : '-' }}
          </div>
        </div>
        <div class="tr-more">
          <div class="th">料号</div>
          <div class="th">产品名称</div>
          <div class="th">使用量</div>
          <div class="th">领用量</div>
          <div class="th td-right-none">单位</div>
        </div>
        <template v-if="planInfo.materials">
          <div
            class="tr-more"
            v-for="item in planInfo.materials"
            :key="item.id"
          >
            <div class="td">{{ item.code ? item.code : '-' }}</div>
            <div class="td">{{ getMaterialName(item.name) }}</div>
            <div class="td">
              {{ item.usageAmount ? item.usageAmount : '-' }}
            </div>
            <div class="td">{{ item.receive ? item.receive : '-' }}</div>
            <div class="td td-right-none">
              {{ item.receiveUnit ? item.receiveUnit : '-' }}
            </div>
          </div>
        </template>
        <template v-else>
          <div class="tr-more">暂无数据</div>
        </template>
      </div>
    </div>

    <!-- 使用工具 -->
    <div class="table mt-60">
      <div class="tr">
        <div class="th th-one th-label">使用工具</div>
        <div class="tr-more">
          <div class="th tool">工具名称</div>
          <div class="th tool">备注</div>
        </div>
        <template v-if="planInfo.tools">
          <div class="tr-more" v-for="item in planInfo.tools" :key="item.id">
            <div class="td tool">{{ item.name ? item.name : '' }}</div>
            <div class="td tool">{{ item.remark ? item.remark : '-' }}</div>
          </div>
        </template>
        <template v-else>
          <div class="tr-more">暂无数据</div>
        </template>
      </div>
    </div>
    <div class="confirm" v-if="val === 'sure'" @click="handleConfirm">确认</div>
    <div class="space"></div>
  </div>
</template>

<script setup>
import moment from 'moment'
import { onLoad } from '@dcloudio/uni-app'
import { ref, onMounted } from 'vue'
import { planItemInfo, materialList } from '../../../api/plan'
const id = ref('')
const taskSchemeId = ref('')
const val = ref('')
const planInfo = ref(null)
const handleConfirm = () => {
  console.log('确认了物料单')
}
const initOptions = (options) => {
  id.value = options.id
  taskSchemeId.value = options.taskSchemeId
  val.value = options.val
}
const materialInfoList = ref('')

//根据物料id查询物料名称
const getMaterialName = (id) => {
  if (!materialInfoList.value) return '-'
  const material = materialInfoList.value.find((item) => item.id === id)
  console.log('material', material)
  return material ? material.name : '-'
}

//根据任务id和方案id查询方案
const getPlanInfo = async () => {
  const res = await planItemInfo(id.value, taskSchemeId.value)
  if (res.code === 200) {
    planInfo.value = res.data
    const materialRes = await materialList()
    if (materialRes.code === 200) {
      materialInfoList.value = materialRes.data
    }
  }
}
onLoad((options) => {
  initOptions(options)
})
onMounted(() => {
  getPlanInfo()
})
</script>

<style scoped lang="scss">
.plan-info {
  padding: $uni-space-default-20;
  box-sizing: border-box;

  .plan-info-list-item {
    display: flex;
    font-size: $uni-font-size-26-rpx;
    padding: 6rpx 20rpx 6rpx 20rpx;

    .item-info {
      width: 50%;

      .item-info-label {
        font-weight: bold;
      }
    }
  }

  .table {
    display: flex;
    flex-direction: column;
    margin-top: $uni-space-default-20;
    text-align: center;
    border: 1px solid $uni-border-color;

    .tr {
      text-align: center;
    }

    .th-one {
      font-size: $uni-font-size-26-rpx;
      line-height: 80rpx;
    }

    .th-label {
      background-color: #b3ccf4;
      font-weight: bold;
    }

    .th_rich_text {
      font-size: $uni-font-size-26-rpx;
      line-height: 40rpx;
      padding: 40rpx 20rpx 40rpx 20rpx;
      text-align: left;
    }

    .tr-more {
      display: flex;
      flex-direction: row;

      .th,
      .td {
        width: 50%;
        text-align: center;
        border-top: 1px solid $uni-border-color;
        border-right: 1px solid $uni-border-color;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .td:last-child {
        border-right: none;
      }

      .td-right-none {
        border-right: none;
      }

      .th {
        font-weight: bold;
        font-size: $uni-font-size-26-rpx;
        padding: 25rpx 0 25rpx 0;
        background-color: #b3ccf4;
      }

      .td {
        padding: $uni-space-default-20;
        font-size: $uni-font-size-26-rpx;
      }
    }
  }

  .mt-60 {
    margin-top: 60rpx;
  }

  .tool {
    width: 50% !important;
  }
}
</style>
